<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../font_l44ykp8rawg/iconfont.css">
    <link rel="stylesheet" href="../css/my01.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <header>
        <div class="tx">
        </div>
        <div>
            <h3 class="na">lihaha</h3>
            <div class="vip">
                <span>Svip会员</span>
                <span>|</span>
                <span>成长值:2</span>
            </div>
        </div>
    </header>
    <section>
        <article class="myding">
            <div class="wen">
                <h3>我的订单</h3>
                <p>
                    <span>查看所有订单</span>
                    <i>
                        <img src="../img/yu.png" alt="">
                    </i>
                </p>
            </div>
            <div class="tu">
                <figure>
                    <span class="iconfont icon-qianbao"></span>
                    <figcaption>待付款</figcaption>
                </figure>
                <figure>
                    <span class="iconfont icon-daifahuo"></span>
                    <figcaption>待付款</figcaption>
                </figure>
                <figure>
                    <span class="iconfont icon-wuliu"></span>
                    <figcaption>待收货</figcaption>
                </figure>
                <figure>
                    <span class="iconfont icon-Group-"></span>
                    <span class="phone"></span>
                    <figcaption>待评价</figcaption>
                </figure>
                <figure>
                    <span class="iconfont icon-tuikuantuihuo"></span>
                    <figcaption>退货/退款</figcaption>
                </figure>
            </div>

        </article>
        <article class="mymoney">
            <div class="wen">
                <h3>我的订单</h3>
                <p>
                    <span style="margin-left: 0.45rem">我要充值</span>
                    <i>
                        <img src="../img/yu.png" alt="">
                    </i>
                </p>
            </div>
            <div class="big">
                <div class="left">
                    <p>账户余额</p>
                    <p>￥5895</p>
                </div>
                <div class="right">
                    <figure>
                        <span class="iconfont icon-qiaquan"></span>
                        <figcaption>优惠卷</figcaption>
                    </figure>
                    <figure>
                        <span class="iconfont icon-shinshoplipinqia"></span>
                        <figcaption>礼品卡</figcaption>
                    </figure>
                </div>
            </div>
        </article>
        <article class="myad">
        </article>
        <article class="myuse">
            <div class="wen">
                <h3>我的订单</h3>
            </div>
            <div class="tu">
                <figure>
                    <span class="iconfont icon-heart"></span>
                    <figcaption>我的收藏</figcaption>

                </figure>
                <figure>
                    <span class="iconfont icon-yanjing"></span>
                    <figcaption>我的发现</figcaption>
                </figure>
                <figure>
                    <span class="iconfont icon-dutoutiao"></span>
                    <figcaption>我的头条</figcaption>
                </figure>
                <figure>
                    <span class="iconfont icon-shezhi"></span>
                    <figcaption>设置</figcaption>
                </figure>

            </div>
        </article>
    </section>
    <footer>
			<figure>
				<a href="#" class="iconfont icon-shouye"></a>
				<figcaption>精选</figcaption>
			</figure>
			<figure style="margin-right: 1.2rem;">
				<a href="#" class="iconfont icon-sousuo"></a>
				<figcaption>分类</figcaption>
			</figure>

			<img src="../img/tutu.jpg" style="height: 1.48rem;width: 1.48rem" />

			<figure style="margin-left: 1.2em;">
				<a href="#" class="iconfont icon-gouwuche"></a>
				<figcaption>购物车</figcaption>
			</figure>
			<figure>
				<a href="#" class="iconfont icon-wode"></a>
				<figcaption>我的</figcaption>
			</figure>
		</footer>
    <script>
        
        $("footer img").hover(function () {
                $('footer img').prop("src", '../img/hong1.jpg');
            }, function () {
                $("footer img").prop("src", "../img/tutu.jpg");
			})
			$("footer figure").hover(function (e) {
				let time =  $(this).index() 
				if($(this).index()>2){
					time -- 
				}
				$('footer figure .iconfont').eq(time).css({color:'#000'});
                $('footer figure figcaption').eq(time).css({color:'#000'});
            }, function () {
				$('footer figure .iconfont').css({color:'#999'});
				$('footer figure figcaption').css({color:'#999'});
            })


    </script>
</body>

</html>